<template>
  <div id="app" :style="{ maxWidth: '750px' }">
    <div class="content" :style="{ height: conH }">
      <keep-alive include="Home">
        <router-view></router-view>
      </keep-alive>
    </div>
    <!-- 底部导航 -->
    <div ref="tabbar" v-if="isTab">
      <van-tabbar v-model="active" route>
        <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item to="/category" icon="shop-o">分类</van-tabbar-item>
        <van-tabbar-item to="/shopcar" icon="cart-o">购物车</van-tabbar-item>
        <van-tabbar-item to="/person" icon="friends-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      conH: 0,
      isTab: true,
    };
  },
  created() {
    // 控制设备宽度即便超过750PX，我们最大也就按照750PX尺寸处理
    let HTML = document.documentElement,
      winW = HTML.clientWidth;
    if (winW >= 750) {
      HTML.style.fontSize = "75px";
    }
  },
  methods: {
    change() {
      // 计算内容区域的高度「区分详情页面」
      let winH = document.documentElement.clientHeight,
        tabbar = this.$refs.tabbar,
        routeName = this.$route.name;
      if (routeName === "detail") this.isTab = false;
      if (routeName !== "detail" && tabbar) winH -= tabbar.offsetHeight;
      this.conH = `${winH}px`;
    },
  },
  watch: {
    $route() {
      this.isTab = true;
      this.$nextTick(() => {
        this.change();
      });
    },
  },
  mounted() {
    this.change();
  },
};
</script>


<style lang="less">
html,
body,
#app {
  height: 100%;
  overflow: hidden;
  background: #f5f5f5;
  font-size: 14px;
}

#app {
  margin: 0 auto;
  .van-tabbar--fixed {
    position: static;
  }

  .content {
    overflow-y: auto;
  }
}
</style>
